<template>
  <div class="statement">
    <div class="left">
      <div class="send">
        <Stack :option-data="aboutsevendata" />
      </div>
      <div v-if="falsesignlist != null" class="sign">
        <div class="title flex">
          <div>近七天虚假签收</div>
          <SelectNetwork width="200" />
        </div>
        <div class="chart">
          <div class="text">
            <Annulus
              :percentage="
                falsesignlist.currentWeekCompare != null
                  ? falsesignlist.currentWeekCompare
                  : 0
              "
              :width="108"
              :stroke-width="12"
            />
            <div>当周虚假签收投诉率</div>
          </div>
          <div class="item">
            <div class="text">当周签收票数</div>
            <div class="number">
              {{ falsesignlist.currentWeekSignForNum }}人
            </div>
          </div>
          <div class="item">
            <div class="text">打标件未履约</div>
            <div class="number">{{ falsesignlist.nonPerformance }}</div>
          </div>
          <div class="item">
            <div class="text">打标件未履约罚款</div>
            <div class="number">{{ falsesignlist.nonPerformanceFine }}</div>
          </div>
        </div>
        <div class="statis">
          <div class="flex">
            <div class="last">
              上周&nbsp;{{ falsesignlist.lastWeekCompareCount }}
            </div>
            <div class="center">虚假签收投诉量</div>
            <div class="next">
              {{ falsesignlist.currentWeekCompareCount }}&nbsp;当周
            </div>
          </div>
          <Score :show-text="false" bg-color="#2087D0" color="#F4B25A" />
        </div>
        <div class="statis">
          <div class="flex">
            <div class="last">
              上周虚假签收赔款金额：{{ falsesignlist.currentWeekCompareFile }}
            </div>
            <div class="center">环比上周罚款：{{ falsesignlist.compare }}</div>
            <div class="next">
              预估当周虚假签收赔款金额：{{ falsesignlist.lastWeekCompareFile }}
            </div>
          </div>
          <Score :show-text="false" bg-color="#2087D0" color="#F4B25A" />
        </div>
      </div>
    </div>
    <div class="right">
      <div class="delivery">
        <div class="title flex">
          <div>
            近七天交货时效<span
              >合计预计罚款：{{
                returnEveryData != null
                  ? parseFloat(returnEveryData.estimatedTotalPenalty.toFixed(2))
                  : '0.00'
              }}</span
            >
          </div>
          <SelectNetwork width="200" />
        </div>
        <div class="time flex">
          <div class="timely">
            <div class="title">及时揽收率</div>
            <div class="flex">
              <div class="chart">
                <Annulus
                  :percentage="
                    returnEveryData != null
                      ? returnEveryData.collection.timelyRatio
                      : 0
                  "
                  :width="108"
                  :stroke-width="12"
                />
                <div class="text">及时揽收率</div>
              </div>
              <div class="chart">
                <Annulus
                  :percentage="
                    returnEveryData != null
                      ? returnEveryData.collection.lastWeek
                      : 0
                  "
                  :width="108"
                  :stroke-width="12"
                  color="#30C86D"
                />
                <div class="text">上周揽收率</div>
              </div>
              <div class="chart">
                <Annulus
                  :percentage="
                    returnEveryData != null
                      ? returnEveryData.collection.compare
                      : 0
                  "
                  :width="108"
                  :stroke-width="12"
                  color="#F4B259"
                />
                <div class="text">环比上周</div>
              </div>
            </div>
            <div class="tips flex">
              <div>
                <div class="title">订单总量</div>
                <div class="number">
                  {{
                    returnEveryData != null
                      ? parseFloat(returnEveryData.collection.total.toFixed(2))
                      : '0.00'
                  }}
                </div>
              </div>
              <div>
                <div class="title">未及时揽收量</div>
                <div class="number">
                  {{
                    returnEveryData != null
                      ? parseFloat(
                          returnEveryData.collection.noTimelyRatio.toFixed(2)
                        )
                      : '0.00'
                  }}
                </div>
              </div>
              <div>
                <div class="title">预计罚款</div>
                <div class="number">
                  {{
                    returnEveryData != null
                      ? parseFloat(returnEveryData.collection.fine.toFixed(2))
                      : '0.00'
                  }}
                </div>
              </div>
            </div>
          </div>
          <div class="retention">
            <div class="title">交货滞留率</div>
            <div class="flex">
              <div class="chart">
                <Annulus
                  :percentage="
                    returnEveryData != null
                      ? returnEveryData.delayDto.timelyRatio
                      : 0
                  "
                  :width="108"
                  :stroke-width="12"
                />
                <div class="text">交货滞留率</div>
              </div>
              <div class="chart">
                <Annulus
                  :percentage="
                    returnEveryData != null
                      ? returnEveryData.delayDto.lastWeek
                      : 0
                  "
                  :width="108"
                  :stroke-width="12"
                  color="#30C86D"
                />
                <div class="text">上周滞留率</div>
              </div>
              <div class="chart">
                <Annulus
                  :percentage="
                    returnEveryData != null
                      ? returnEveryData.delayDto.compare
                      : 0
                  "
                  :width="108"
                  :stroke-width="12"
                  color="#F4B259"
                />
                <div class="text">环比上周</div>
              </div>
            </div>
            <div class="tips flex">
              <div>
                <div class="title">考核票数</div>
                <div class="number">
                  {{
                    returnEveryData != null
                      ? parseFloat(returnEveryData.delayDto.total.toFixed(2))
                      : '0.00'
                  }}
                </div>
              </div>
              <div>
                <div class="title">交货滞留量</div>
                <div class="number">
                  {{
                    returnEveryData != null
                      ? parseFloat(returnEveryData.delayDto.compare.toFixed(2))
                      : '0.00'
                  }}
                </div>
              </div>
              <div>
                <div class="title">预计罚款</div>
                <div class="number">
                  {{
                    returnEveryData != null
                      ? parseFloat(returnEveryData.delayDto.fine.toFixed(2))
                      : '0.00'
                  }}
                </div>
              </div>
            </div>
          </div>
          <div class="retention48">
            <div class="title">48h滞留</div>
            <div class="chart">
              <Annulus
                :percentage="
                  returnEveryData != null
                    ? returnEveryData.fortyEightHRetention.compare
                    : 0
                "
                :width="108"
                :stroke-width="12"
              />
              <div class="text">环比上周</div>
            </div>
            <div class="tips">
              <div>
                <div class="title">揽收票数</div>
                <div class="number">
                  {{
                    returnEveryData != null
                      ? parseFloat(
                          returnEveryData.fortyEightHRetention.total.toFixed(2)
                        )
                      : '0.00'
                  }}
                </div>
              </div>
              <div>
                <div class="title">48h未交货</div>
                <div class="number">
                  {{
                    returnEveryData != null
                      ? parseFloat(
                          returnEveryData.fortyEightHRetention.fortyEightHRetention.toFixed(
                            2
                          )
                        )
                      : '0.00'
                  }}
                </div>
              </div>
              <div>
                <div class="title">预计罚款</div>
                <div class="number">
                  {{
                    returnEveryData != null
                      ? parseFloat(
                          returnEveryData.fortyEightHRetention.fine.toFixed(2)
                        )
                      : '0.00'
                  }}
                </div>
              </div>
              <div>
                <div class="title">上周罚款</div>
                <div class="number">
                  {{
                    returnEveryData != null
                      ? parseFloat(
                          returnEveryData.fortyEightHRetention.lastWeekFine.toFixed(
                            2
                          )
                        )
                      : '0.00'
                  }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="sign">
        <Stack :option-data="dataaboutseven" />
      </div>
    </div>
  </div>
</template>

<script>
import {
  getReturnWeek
} from '@/api/workOrder'
import {
  getSevenDayaging, getSevenDaySignApi
} from '@/api/QualityStatement'
export default {
  name: 'Statement1',
  data() {
    return {
      dataaboutseven: null,
      aboutsevendata: null,
      // 近七天交货时效
      returnEveryData: null,
      falsesignlist: null
    }
  },
  computed: {},
  watch: {},
  created() {
    this.init()
  },
  methods: {
    init() {
      this.getReturnWeekData()
      this.getSevenDayData()
      this.getSevenDaySign()
      getReturnWeek(2).then((res) => {
        this.dataaboutseven = res.data
      })
    },
    getReturnWeekData() {
      getReturnWeek(1).then((res) => {
        this.aboutsevendata = res.data
      })
    },
    // 近七天交货时效
    async getSevenDayData() {
      const res = await getSevenDayaging()
      this.returnEveryData = res.data
    },
    // 近七天虚假签收
    async getSevenDaySign() {
      const res = await getSevenDaySignApi()
      console.log('近七天虚假签收', res)
      this.falsesignlist = res.data
    }
  }
}
</script>
<style lang='scss' scoped>
.statement {
  padding: 30px 10px 30px 30px;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  background: #f5f5f5;

  .flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .title {
    font-weight: 400;
    font-size: 20px;
    color: #333333;
  }

  .left > div,
  .right > div {
    padding: 24px;
    background: #ffffff;
    box-shadow: 0px 2px 2px 0px rgba(113, 121, 144, 0.06);
    border-radius: 8px;
  }

  .el-progress {
    &::v-deep .el-progress__text {
      font-size: 20px !important;
    }
  }

  .left {
    width: 770px;

    .send {
      height: 466px;
    }

    .sign {
      margin-top: 20px;
      height: 408px;

      .chart {
        margin-top: 30px;
        display: flex;

        & > div + div {
          margin-left: 34px;
        }

        .text {
          width: 108px;
          text-align: center;
          color: #666;
          line-height: 24px;
        }

        .item {
          padding-top: 24px;

          .text {
            text-align: left;
            color: #666666;
          }

          .number {
            margin-top: 10px;
            color: #2087d0;
          }
        }
      }

      .statis {
        margin-top: 32px;

        .flex {
          margin-bottom: 6px;

          .last {
            width: 260px;
            color: #f4b25a;
          }

          .next {
            width: 260px;
            text-align: right;
            color: #2087d0;
          }
        }
      }
    }
  }

  .right {
    width: 1070px;

    .delivery {
      height: 408px;

      .title {
        span {
          margin-left: 30px;
          font-size: 18px;
          color: #2087d0;
        }
      }

      .time > div {
        padding: 20px;
        height: 100%;
        background: #fafafa;
        border-radius: 8px;
        border: 1px solid #ebecee;
      }

      .time {
        margin-top: 20px;
        height: 322px;

        .title {
          font-size: 18px;
        }

        .flex {
          margin-top: 18px;

          .chart {
            text-align: center;

            .text {
              margin-top: 10px;
            }
          }
        }

        .tips {
          padding: 18px 24px;
          height: 86px;
          background: #fff;
          border-radius: 8px;
          box-shadow: 0 0 8px 0 #2087d0 inset;

          .title {
            font-weight: 400;
            font-size: 16px;
            color: #666666;
          }

          .number {
            margin-top: 4px;
            font-weight: 500;
            font-size: 24px;
            color: #2087d0;
          }
        }

        .timely {
          width: 396px;
        }

        .retention {
          width: 396px;
        }

        .retention48 {
          width: 198px;

          .chart {
            margin-top: 18px;
            text-align: center;
          }

          .tips {
            margin-top: 20px;
            padding: 0;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            box-shadow: none;
            background: none;

            & > div {
              width: 78px;
              height: 50px;
            }

            .number {
              font-size: 16px;
            }
          }
        }
      }
    }

    .sign {
      margin-top: 20px;
      height: 466px;
    }
  }
}
</style>
